<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>19_案例练习-全选-全不选-反选</title>
</head>

<body>
    <label>
        <input type="checkbox">吃
    </label>

    <label>
        <input type="checkbox">喝
    </label>

    <label>
        <input type="checkbox">嫖
    </label>

    <label>
        <input type="checkbox">嫖
    </label>
    <br>

    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>


    <script>
        var btn_list = document.querySelectorAll('button');

        var inp_list = document.querySelectorAll('input'); 

        btn_list[0].onclick = function(){
            inp_list.forEach(function(item){
                item.checked = true;
            })
        }

        btn_list[1].onclick = function(){
            for(var i = 0; i < inp_list.length; i++){
                inp_list[i].checked = false;
            }
        }

        btn_list[2].onclick = function(){
            inp_list.forEach(function(item){
                item.checked = !item.checked;
            })
        }
    </script>
</body>

</html>